<template>
  <div id="login">
    <div class="container">
      <div class="content">
        <div class="left">
          <img src="../assets/img/article_bg.jpg"></img>
        </div>
        <div class="right">
          <h1>Sign up</h1>
          <!-- 表单 -->
          <el-form :model="form" :rules="rules" ref="loginForm" label-position="top">
            <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
              <el-input
                placeholder="请输入用户名"
                prefix-icon="el-icon-s-custom"
                v-model="form.username">
              </el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
              <el-input 
                placeholder="请输入密码" 
                prefix-icon="el-icon-s-grid"
                v-model="form.password" 
                show-password>
              </el-input>
            </el-form-item>
          </el-form>  
          <!-- 操作按钮 -->
          <div class="btns">
            <el-button type="primary" @click="submit()">登录</el-button>
          </div>  
        </div> 
      </div>  
    </div>
  </div>
</template>

<script>
  import qs from 'qs'
  export default{
    data() {
      return {
        form: {
          "username": '',
          "password":''
        },
        rules:{
          username:[{required:true,message:'请输入用户名',trigger:'blur'}],
          password:[{required:true,message:'请输入密码',trigger:'blur'}]
        },
        formLabelWidth: '120px'
      };
    },
    methods:{
      //发送登录请求
      submit(){
        this.$refs.loginForm.validate(async valid => {
          if(!valid){
            this.$message.error('请输入用户名和密码');
            return;
          }
          //发送请求，获取登陆成功的数据
          const {data:res} = await this.$http.post('/blog/admin/login', qs.stringify(this.form))
          if(res.meta.status !== 200){
            this.$message({
              message: '用户名/密码错误',
              type: 'error'
            });     
            return;       
          }
          //登陆成功后1.设置session,2.提示用户登录成功,3.跳转到后台页面
          window.sessionStorage.setItem('token', res.token) //设置session
          this.$message({
            message: '登录成功啦',
            type: 'success'
          });  
          this.$router.push('/admin')       
        })        
      }
    }
  }
</script>

<style scoped>
  #login{
    height:100%;
    width:100%;
    /*background-image:url("../assets/img/login.gif"); */
    position:relative;
    z-index:1;
  }
  .container{
    height:80%;
    width:80%;
    border-radius:20px;
    box-shadow:0px 0px 15px #ccc;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }
  .content{
    width:80%;
    height:80%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
  }
  .left{
    width:50%;
    height:100%;
    float:left;
  }
  .left img{
    height:100%;
    width:100%;
    border-radius:8px;
  }
  .right{
    width:50%;
    height:100%;
    float:right;
    background-color:white;
    box-sizing:border-box;
  }
  .right h1{
    margin-top:15%;
    margin-left:10%;
  }
  .right .el-form{
    width:80%;
    margin: 0 auto;
  }
  .el-form-item__label{
    width:60px !important; 
  }
  .right .btns{
    margin-top:10%;
    margin-left:10%;
  }
</style>
